import React from 'react'
import './App.scss'
class App extends React.Component {
    constructor() {
        super()
        this.state = {
            //总数据
            num: [],
            input: '',
            cha: ''
        }
    }
    //改变input的值
    Input = (event) => {
        this.setState({
            input: event.target.value
        })
    }
    // 增加
    numPush = () => {
        console.log(this.state.num)
        if (!this.state.input) {
            alert('不能为空')
        } else {
            this.setState({
                //添加用合并
                num: [...this.state.num, this.state.input],
                input: '',
                cha:''
            })
        }
    }

    //删除一个
    Move = (index) => {
        this.state.num.splice(index, 1)
        const ne = this.state.num
        console.log(ne)
        this.setState({
            num: ne
        })
    }
    //全部 删除
    Removes = () => {
        this.setState({
            num: []
        })
    }
    //改变查的值
    Cha=(e)=>{
        this.setState({
            cha:e.target.value
        })
    }
    search = () => {
        // 模糊搜索
        const d = this.state.num.filter((item) => item.includes(this.state.cha))
          alert(d[0])    
      }
    render() {
        let time = new Date();
        let houer = time.getHours();
        let min = time.getMinutes();
        const { num, input,cha } = this.state
        return <div className='box'>
            {/* 获取数据 */}
            <div className='top-input'>
                <input type="text" onChange={this.Input} value={input} placeholder='输入添加内容' />
                <button onClick={this.numPush}>提交</button>
            </div>

            <div className='value'>
                <ul>
                    <li>
                        当前信息共：{num.length} 条
                    </li>
                    <li>
                        <input type="text" placeholder='查询留言板' onChange={this.Cha} value={cha} />
                        <button onClick={this.search}>查找</button>
                        <button onClick={this.Removes}>清空留言板</button>
                    </li>
                    {
                        num.map((item, value, arr) => {
                            return <li key={value}>
                                <span>
                                    {item}
                                </span>
                                <span>
                                    <span>{houer}:{min}</span>
                                    <button onClick={() => this.Move(value)}>删除</button>
                                </span>

                            </li>
                        })
                    }
                </ul>
            </div>
        </div>
    }
}

export default App
/*
跳蚤市场:
    汝之敞草吾之瑰宝,世界上没有无用的物品,只用用错地方的物品。
    以良心价收购手上占地放的,不常用的物品,良心价格出售.
    小至耳机帽,大到二手汽车,只要你能提供全面的物品信息和购买手续,我们都能以一个合理的价格手下
    完全透明式交易,交易由卖方买方和我方在线交易
    
发泄屋:
*/ 